<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的生命周期</title>
</head>
<body>
    <div id="app">
        <span id="el">{{msg}}</span>
        <input type="text" v-model=""
    </div>
</body>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello Vue!"
        },
        methods: {
            showMsg(){
                alert("方法调用！！！")
            }
        },
        //第一个钩子函数
        beforeCreate() {
            console.log("vue实列初始化--------进行中");
            console.log("当前msg的值是:"+this.msg);
            //this.showMsg();
        },
        //第二个钩子函数
        created() {
            console.log("vue实列初始化--------完成");
            console.log("当前msg的值是:"+this.msg);
            this.showMsg();
        },
        //第三个钩子函数
        beforeMount() {
            console.log("执行时Vue将EL中指定作用范围为模板编译,但是数据还未渲染到页面中",
            document.getElementById("el").innerText);
        },
        //第四个函数
        mounted() {
            console.log("数据开始渲染到页面中"
            ,document.getElementById("el").innerText);
        },
        //第五个函数，数据改变之前
        beforeUpdate() {
            console.log("data数据发生改变之前"
            ,document.getElementById("el").innerText);
        },
        //第六个函数
        updated() {
            //该函数执行时data中的数据发生变化时执行
            //
            //页面中的数据已经和data中的数据一致
            console.log("虚拟dom重新渲染,更新"
            ,document.getElementById("el").innerText);
        },

});
        
</script>